import React, { useEffect, useState } from 'react';
import PageTitle from '@/components/PageTitle';
import TagTitle from '@/components/TagTitle';
import UplodFile from '@/components/FileUpload/UplodFile';
import { Button, Col, Form, Input, message, Row, Select } from 'antd';
import { insertExpressInfo, insertExpressInfoData, queryByIdExpressInfo, updateExpressInfo } from '@/services/addliver';
import { CloudUploadOutlined, PlusOutlined } from '@ant-design/icons';
import { connect } from 'umi';
const { Option } = Select;
const Adddelivery = props => {
  const [form] = Form.useForm();
  const [disables, setDisables] = useState<boolean>(false);
  let { location, userData } = props;
  let { disabled, id, flag = 0 } = location?.query ?? {};
  useEffect(() => {
    if (id) {
      queryByIdExpressInfo({ id }).then(res => {
        if (res?.responseCode == 200) {
          form.setFieldsValue({
            ...res.data?.expressInfo,
            pictureList:
              res.data?.pictureList?.map((el: any, index: number) => ({
                key: index + 1,
                value: el.pictureId,
              })) || [],
          });
        }
      });
    }

    if (disabled) {
      setDisables(true);
    }
  }, []);

  /**
   * 添加、编辑快递信息
   * @param value
   */
  const onFinish = (value: any) => {
    let option: any = {
      expressInfo: {
        ...value,
        state: flag ? 1 : undefined,
        id: id ?? undefined,
        createrId: userData?.id,
      },
      pictureList: value?.pictureList?.map(el => ({
        pictureId: el.value,
      })),
    };

    delete option.expressInfo.pictureList;

    console.log(option);
    if (!id) {
      insertExpressInfo(option).then(res => {
        if (res?.responseCode == 200) {
          message.success('新增快递成功');
          history.go(-1);
        }
      });
    } else {
      updateExpressInfo(option).then(res => {
        if (res?.responseCode == 200) {
          message.success('编辑快递成功');
          history.go(-1);
        }
      });
    }
  };

  const render = (
    <div style={{ color: '#cbcbcb' }}>
      <CloudUploadOutlined style={{ fontSize: 40 }} />
      <div>
        <p>请上传附件图片</p>
        <p>支持jpg、png格式</p>
      </div>
    </div>
  );

  return (
    <div className="works_table">
      <Form labelCol={{ span: 6 }} wrapperCol={{ span: 12 }} layout="horizontal" onFinish={onFinish} form={form}>
        <PageTitle title={disabled ? '查看收货信息' : '新增收货信息'} />
        <div className="works_form">
          <TagTitle title={disabled ? '查看内容' : '编辑内容'} />
          <div className="works_form_row">
            <Row>
              <Col span={8}>
                <Form.Item label="快递公司" name="courierServicesCompany" rules={[{ required: true, message: `快递公司不能为空` }]}>
                  <Input disabled={disables || flag} size="large" placeholder="请输入快递公司" allowClear />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="快递单号" name="courierNumber" rules={[{ required: true, message: `快递单号不能为空` }]}>
                  <Input disabled={disables || flag} size="large" placeholder="请输入快递单号" allowClear />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="接收地址" name="receivPlaceName" rules={[{ required: true, message: `接收地址不能为空` }]}>
                  <Select disabled={disables || flag} size="large" placeholder="请选择地址" allowClear>
                    <Option value={'1'}>北京</Option>
                    <Option value={'2'}>上海</Option>
                    <Option value={'3'}>嘉兴</Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
          </div>
          <div className="hr"></div>
          <TagTitle title={'附件'} />
          <div className="export_list">
            <Form.Item label="" name="pictureList">
              <UplodFile render={render} disabled={disables} limit={100} />
            </Form.Item>
          </div>

          <div className="hrs"></div>
          <div className="add">
            {!disables ? (
              <Button className="btn_red" htmlType="submit">
                保存
              </Button>
            ) : (
              <Button
                className="btn_cold"
                onClick={() => {
                  history.go(-1);
                }}>
                退出
              </Button>
            )}
          </div>
        </div>
      </Form>
    </div>
  );
};

export default connect(({ login }: { [index: string]: any }) => ({ userData: login.userData }))(Adddelivery);
